<template>
  <el-dialog title="检查付费" :close-on-click-modal="false" :visible.sync="visible" fullscreen center>
    <el-divider content-position="left">人员基本信息</el-divider>
    <div class="custom-info-box">
      <!-- 人员基本信息 -->
      <div class="custom-box">
        <div class="custom-item"><span>姓名：</span><span>{{dataForm.personName}}</span></div>
        <div class="custom-item">
          <span>性别：</span>
          <span v-if="dataForm.gender == 0">男</span>
          <span v-if="dataForm.gender == 1">女</span>
        </div>
        <div class="custom-item"><span>年龄：</span><span>{{dataForm.age}}岁</span></div>
        <div class="custom-item"><span>联系方式：</span><span>{{dataForm.telphone}}</span></div>
        <div class="custom-item"><span>就诊事项：</span><span>{{dataForm.registerConfigName}}</span></div>
        <div class="custom-item"><span>费别：</span><span>{{registerForm.payType==1?'自费':'医保'}}</span></div>
        <div class="custom-item"><span>患者ID：</span><span>{{dataForm.uniqueCode}}</span></div>
        <div style="position: absolute;right: 0;top: 3px;">
          <el-button size="mini" type="primary" icon="el-icon-caret-bottom" @click="openOrClose"></el-button>
        </div>
      </div>

      <!--详细信息 -->
      <div class="custom-box" v-if="infoVisible">
        <div class="custom-item"><span>{{dataForm.address}}</span></div>
      </div>
    </div>
    <div>
      <el-divider content-position="left">代收费项目</el-divider>
      <el-table :data="checkItemList" border style="width: 100%">
        <el-table-column prop="name" label="项目名称" header-align="center" align="center" width="480"></el-table-column>
        <el-table-column prop="num" label="数量" header-align="center" align="center" width="180"></el-table-column>
        <el-table-column prop="price" label="单价" header-align="center" align="center"></el-table-column>

      </el-table>
      <el-form label-width="80px" style="margin-bottom: 15px;">
        <el-row style="background-color: #ecf5ff;padding: 5px 10px;">
          <el-col :span="4">
            <el-form-item label="应缴金额">
              <el-input v-model="dataForm.checkPrice" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="缴费金额">
              <el-input v-model="payValue" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4"></el-col>
        </el-row>
      </el-form>
      <payment-form :paymentDataList="paymentDataList" @refreshFormData="getPaymentValue"  :show="true"></payment-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="paymentHandle">缴 费</el-button>
    </span>

  </el-dialog>
</template>

<script>
  import {mapGetters} from 'vuex'

  import PaymentForm from '@/components/business/Payment'
  import {getRegister, checkPayRegisterCenter, saveRegisterCenter } from '@/api/eims/cashier/register'
  import { getRegisterConfigList } from '@/api/eims/register-config'
  import {checkItemListByChkData} from '@/api/def/checkItem'

  export default {
    props:['saleDataList'],
    data() {
      return {
        visible: false,
        dataForm: {},
        feeType: '1',
        checkTypeOptions: [],
        registerForm: {
          checkType: ''
        },
        infoVisible:false,
        checkItemList: [],
        visibleData: {
          money: false,
          integral: true,
          bankCard: true,
          storeCard: true,
          coupon: true
        },
        paymentDataList: [
            {method: '1', name: '现金',button: false, cost: ''},
            {method: '2', name: '积分',button: true, cost: ''},
            {method: '3', name: '储值卡',button: true, cost: ''},
            {method: '4', name: '银行卡',button: true, cost: ''},
            {method: '5', name: '代金券',button: true, cost: ''},
        ],
        paidPrice: '',
        payValue: '',
        customerSearchVisible: false
      }
    },
    components:{
      PaymentForm
    },
    computed: {
      ...mapGetters(['permissions','userInfo'])
    },
    methods:{
      // 打开弹窗，初始化数据
      init(id,chkDataId){
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
            if (this.dataForm.id) {
                getRegister(this.dataForm.id).then(response => {
                    this.dataForm = response.data.data
                })
            }
            if (chkDataId) {
                checkItemListByChkData(chkDataId).then(response => {
                    this.checkItemList = response.data.data
                })
            }
        })
      },
        // 打开或关闭客户详情信息
        openOrClose() {
            this.infoVisible = !this.infoVisible
        },
      //  获取缴费数据
      getPaymentValue(data) {
        this.payValue = data
      },

      //  表单提交，缴费
      paymentHandle() {

          if(!this.dataForm.personId){
              this.$message.warning('请选择患者')
              return false
          }
          let list = []
          this.paymentDataList.forEach(item => {
              if(item.cost){
                  list.push({method:item.method,totalPrice: item.cost})
              }
          })
          this.dataForm.detailList =list
          if(this.payValue == this.dataForm.checkPrice) {
              checkPayRegisterCenter(this.dataForm).then(result => {
                  if(result.data.code == 0) {
                      this.$message.success('缴费成功')
                      this.visible = false
                      this.getDataList()
                  }
              })
          }else{
              this.$message.warning('请核对缴费金额')
          }
      },
        //  查询客户
        searchCustomer() {
          this.customerSearchVisible = true
            this.$nextTick(() => {
                this.$refs.customerSearch.init()
            })
        },
        // 获取客户信息
        updateForm(data) {
            this.customerData = data
        },

        //  获取检查类型列表
        getCheckTypeList() {
            getRegisterConfigList({feeType: this.feeType}).then(result => {
                console.log(result)
                let resultData = result.data.data;
                let list = []
                resultData.forEach(item => {
                    if(item.type == '1'){
                        list.push(item)
                    }
                })
                this.checkTypeOptions = list
            })
        },
        //  选择检查类型
        checkTypeChange(val) {
          let list = []
            this.checkTypeOptions.forEach(item => {
                if(item.id == val){
                    this.paidPrice = item.price
                    this.paymentData.money = item.price
                    list.push(item)
                }
            })
          this.checkTypeList = list
        },
      clearAllInput() {
        for(let key in this.paymentData){
          this.paymentData[key] = ''
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  table tr td {
    border: solid 1px red;
    padding: 3px 8px;
  }
  .custom-info-box {
    border: solid 1px #e7e7e7;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 4px;
    background-color: #d1e0f8;
    margin-bottom: 15px;
  }

  .tabs-info-box {
    z-index: 1000;
  }

  .button-info-box {
    margin-top: 15px;
    text-align: right;
  }
  .custom-box {
    position: relative;
    display: flex;
    justify-content: flex-start;
    padding: 5px 15px;
    .custom-item {
      flex: auto;
    }
  }
</style>
